<template>
  <div class="login" v-if="!getIsPhone">
    <div id="wrap">
      <div class="content box-shadow">
        <div class="logo">
          <img :src="logo" alt="">
        </div>
        <div class="content-top">
          <div class="img">
            <img :src="banner" class="banner"  alt="">
          </div>
            <!-- 登陆表单 -->
          <form class="login">
            <p>登陆</p>
            <input-item 
              :errorMsg="errorMsg"
              :type="'text'" 
              :title="'账号'" 
              :placeholder="'请输入账号'"
              @input="updateAccountName"
              >
            </input-item>
            <input-item 
              :errorMsg="errorMsg"
              :type="'password'" 
              :title="'密码'" 
              :placeholder="'请输入密码'"
              @input="updatePassword"
              >
            </input-item>
            <div class="find-pwd" style="lineHeight: 40px; textAlign: right">
              <span class="hint-content" v-show="errorMsg !== ''">{{errorMsg}}</span>
              <span class="get-password" @click="goFindPwd">忘记密码?</span>
            </div>
            <div class="btns" style="marginTop: 25px">
              <submit-button 
                @click="goSignup"
                :name="'免费注册'"
                >
              </submit-button>
              <submit-button :name="'登陆'"
                :buttonState=" isActive ? 'selected' : 'disabled'"
                @click="handleLogin"
              ></submit-button>
            </div>
          </form>
        </div>
        <div class="content-bottom">
          <div class="content-bottom-wrap">
            <div class="left item">
              <span class="img box-shadow"></span>
              <div class="text">
                <button>下载手机端</button>
                <p>随时随地 任性畅玩</p>
              </div>
            </div>
            <div class="item">
              <span class="img box-shadow"></span>
              <div class="text">
                <button>联系客服</button>
                <p>7*24小时在线客服</p>
              </div>
            </div>
            <div class="item">
              <span class="img box-shadow"></span>
              <div class="text">
                <button>意见反馈</button>
                <p>意见与建议</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="login-phone" v-else>
    <login-signup-template>
      <template v-slot:form>
        <div class='from-group'>
          <input-item 
            :errorMsg="errorMsg"
            :type="'text'" 
            :title="'账号'" 
            :placeholder="'请输入账号'"
            @input="updateAccountName"
            >
          </input-item>
          <input-item 
            :errorMsg="errorMsg"
            :type="'password'" 
            :title="'密码'" 
            :placeholder="'请输入密码'"
            @input="updatePassword"
            >
          </input-item>
        </div>
      </template>
      <template v-slot:hint>
        <span class="hint-content" v-show="errorMsg !== ''">{{errorMsg}}</span>
        <span class="get-password" @click="goFindPwd">忘记密码?</span>
      </template>
      <template v-slot:submit>
        <submit-button 
          @click="goSignup"
          :name="'免费注册'"
          >
        </submit-button>
        <submit-button :name="'登陆'"
          :buttonState=" isActive ? 'selected' : 'disabled'"
          @click="handleLogin"
        ></submit-button>
      </template>
    </login-signup-template>
  </div>
</template>

<script>
import LoginSignupTemplate from './components/login-signup-template'
import InputItem from './components/input-item'
import SubmitButton from './components/submit-button'
import LoginBottom from './components/login-bottom'
import logo from "@/assets/imgs/logo.png"
import banner from '@/assets/imgs/index_banner_01.png'
import { mapGetters, mapMutations } from 'vuex'
export default {
  components: {
    InputItem,
    SubmitButton,
    LoginBottom,
    LoginSignupTemplate
  },
  data() {
    return {
      logo: logo,
      banner: banner,
      password: '',
      accountName: '',
      loginState: 'disabled',
      signupState: 'unselected',
      errorMsg: '',
      showReister: false, //是否显示注册
      forgetPassword: false,
    }
  },
  methods: {
    updatePassword(password) {
      this.password = password
      this.errorMsg = ''
    },
    updateAccountName(accountName) {
      this.accountName = accountName
      this.errorMsg = ''
    },
    handleLogin() {
      let password = this.getUserInfo.password
      let accountName = this.getUserInfo.accountName 
      setTimeout(() => {
        if (this.password == password && this.accountName == accountName) {
          this.setLoginState(true)
          this.$router.push('/')
        } else {
          this.errorMsg = '用户名或密码错误'
        }
      }, 1000)
    },
    goSignup() {
      this.$router.push({path: '/signup'})
    },
    goFindPwd() {
      this.$router.push({path: '/findpwd'})
    },
    ...mapMutations('lottery', {
      setLoginState: 'SET_LOGIN_STATE'
    }),
  },
  computed:{
    ...mapGetters('lottery', ['getIsPhone', 'getUserInfo']),
    isActive() {
      return this.password !== '' && this.accountName !== '' && this.errorMsg == '' 
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px) 
    #wrap
      width 100%;
      height 100%;
      overflow hidden
      .content
        width 960px;
        height 430px;
        background-color #faf8f8;
        position absolute 
        left 50%
        top 50% 
        transform translate(-50%, -50%)
        border-radius 5px;
        border 1px solid #dbd3d3;
        box-sizing border-box 
        .logo
          position absolute 
          top -120px 
          left 50%
          transform translateX(-50%)
          width 250px;
          height 80px;
          margin 0 auto
          margin-top 20px
          img 
            width 100%
        .content-top
          width 960px;
          height 320px;
          border-bottom  1px solid #dbd3d3;
          clear both;
          .img 
            float left;
            width 540px;
            height 288px;
            text-align center;
            margin-top 5px;
            // background-color pink;
            margin-top 20px;
            margin-bottom 20px;
            margin-left 19px;
            border-radius 3px;
            .banner 
              height 100% 
              width 100%
          .login
            float left;
            margin-top 20px;
            margin-left 20px;
            width 360px;
            height 288px;
            position relative;
            .input1
              span 
                position absolute;
                top 42px;
                right 15px;
                cursor pointer;
            .loginError
              color red;
              font-size 14px;
              margin 13px;
              .img
                margin 5px;
                float left;
                display inline-block;
                width 8px;
                height 8px;
                border 1px solid red;

            p
              width 360px;
              text-align center;
              font-size 24px;
              margin-top 14px;
            a
              // display inline-block;
              margin-top 10px;
              margin-bottom 10px;
              float right;
              color #000;
              cursor pointer;
              text-decoration none;
            .btn
              position absolute;
              top 248px;
            .btn1
              left 0;
            .btn2
              right 0;
        .content-bottom
          .content-bottom-wrap
            width 760px;
            height 62px;
            margin 0 auto
            margin-top 20px
            display flex 
            justify-content space-between
            .item 
              display flex 
              .img
                display inline-block;
                width 60px;
                height 60px;
                border-radius 50% 
                background #fff
                border 1px solid #dbd3d3
              .text 
                margin-left 20px 
                button 
                  width 96px;
                  height 32px;
                  border-radius 14px;
                  background-color #fcfcfc;
                  outline none;
                  border 1px solid #dbd3d3;
                  font-size 14px;
                  color red;
                  font-weight bold;
                  text-align center;
                  box-shadow 0 1px 5px 1px #dbd3d3;
                  margin-bottom 15px
                  cursor pointer;
  @media screen and (max-width 750px) 
    .login-phone
      box-sizing border-box 
    .login-phone >>>.form 
      margin-top 40px
    .login-phone >>>.submit
      margin-top 30px
    .get-password 
      display inline-block
      position absolute 
      right 11px
    .hint-content 
      color $color-theme-red 
       

</style>